<template>
  <div class="yhtImgContainer">
    <div class="login-nav">
      <div class="nav-content">
        <div class="l-logo">
          <a href="https://www.instrument.com.cn" target="_blank">
            <img src="https://img1.17img.cn/ui/simg/instrument/20220330/yxt_logo_20220721.png" alt="">
          </a>
          <!-- <a href="https://www.instrument.com.cn/list/yxt.html" target="_blank">
            <img src="https://img1.17img.cn/ui/simg/instrument/20220330/yxt_toplefthelp_20220721.png" alt="">
          </a> -->
        </div>
        <div class="r-menus">
          <!-- <a target="_blank" class="title" href="https://www.instrument.com.cn/list/yxt.html">会员介绍</a> -->
          <router-link target="_blank"  class="title active" :to="{path: '/yhtMember'}">会员介绍</router-link>
          <!-- <router-link
            target="_blank"
            class="title"
            :class="{ active: routerQueryType == 'index' }"
            :to="{ path: '/helphome', query: { type: 'index' } }"
          >帮助中心</router-link> -->
          <router-link class="title" :class="{'active': routerQueryType == 'register'}" :to="{path: '/login', query: {type: 'register'}}">注册</router-link>
          <router-link class="title" :class="{'active': routerQueryType == 'sign'}" :to="{path: '/login', query: {type: 'sign'}}">登录</router-link>
          <div class="meun-tel">
            <span class="tel-icon">
              <svg-icon icon-class="tel" />
            </span>
            <a class="tel-num" href="tel:157-1885-0776">157-1885-0776</a>
          </div>
          <button class="menu-btn" @click="apply">申请入驻</button>
        </div>
      </div>
    </div>
    <div class="yhtButton">
      <img src="https://img1.17img.cn/ui/simg/instrument/2023/fuwu_1x_1_20230330.png" alt="">
      <div class="ybDialog">
        <a href="JavaScript:;" @click="alertApply">获取报价表</a>
      </div>
    </div>
    <img src="https://img1.17img.cn/ui/simg/instrument/2023/fuwu_1x_2_20230330.png" alt="">
    <img src="https://img1.17img.cn/ui/simg/instrument/2023/fuwu_1x_3_20230330.png" alt="">
    <img src="https://img1.17img.cn/ui/simg/instrument/2023/fuwu_1x_4_20230330.png" alt="">
    <appplyPancy ref="appplyPancy" />
  </div>
</template>
<script>
import appplyPancy from '@/components/applytopancy/index.vue'
export default {
  components: {
    appplyPancy
  },
  data(){
      return{
        routerQueryType:''
      }
    },
  methods: {
    alertApply () {
      this.$refs.appplyPancy.applyDialog = true
    },
    apply () {
      this.$refs.appplyPancy.applyDialog = true
    },
  },
  watch: {
    $route: {
      handler (newVal, oldVal) {
        // 判断newVal有没有值监听路由变化
        if (newVal) {
          console.log(newVal,'newVal');
          this.routerQueryType = newVal.query.type
        }
      },
      deep: true
    }
  },
}
</script>
<style lang="scss" scoped>
  .yhtImgContainer {
    width: 100%;
    font-size: 0;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    .login-nav {
      width: 100%;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    background: #fff;

    .nav-content {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      @include flex(row, center, space-between);

      .l-logo {
        a {
          height: 100%;
          display: inline-block;
          cursor: pointer;
          &:first-child {
            width: 190px;
            // border-right: 1px solid #ccc;
            // padding-right: 16px;
          }
          &:last-child {
            width: 155px;
    padding-left: 100px;
    padding-top: 5px;
          }
          img {
            width: 100%;
          }
        }
      }
      .r-menus {
        @include flex(row, center, flex-start);

        .title {
          font-size: 18px;
          color: #323233;
          margin: 0 14px;
          padding: 25px 6px 25px;
          position: relative;
          line-height: 1;

          &.active {
            color: #0C7FF2;

            &::after {
              content: "";
              position: absolute;
              height: 4px;
              background: #0C7FF2;
              bottom: 0px;
              left: 0;
              right: 0;
            }
          }
        }
        .meun-tel {
          width: 200px;
          // height: 45px;
          border: 1px solid #ebedf0;
          border-radius: 4px;
          padding: 5px 8px;
          margin-left: 30px;
          box-sizing: border-box;
          margin-right: 35px;
          @include flex(row, center, flex-start);

          .tel-icon {
            width: 34px;
            height: 34px;
            background: #0C7FF2;
            border-radius: 4px;
            margin-right: 12px;
            vertical-align: middle;
            text-align: center;
            line-height: 34px;
            font-size: 20px;
          }
          .tel-num {
            font-size: 18px;
            line-height: 1;
            color: #0C7FF2;
          }
        }
        .menu-btn {
          font-size: 18px;
          color: #fff;
          padding: 14px 40px;
          line-height: 1;
          border-radius: 6px;
          background: #0C7FF2;
          border: none;
          list-style: none;
          cursor: pointer;
          transition: 0.3s;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
    .yhtButton {
      width: 100%;
      overflow: auto;
      position: relative;
      padding-top: 72px;
      .ybDialog{
        width: 62%;
        position: absolute;
        left: 20%;
        top: 0;
        right: 0;
        bottom: 0;
        &>a {
          width: 204px;
          height: 64px;
          background: #0C4CF2;
          border-radius: 6px 6px 6px 6px;
          font-size: 26px;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 62px;
          text-align: center;
          display: block;
          position: absolute;
          bottom: 15%;
          z-index: 99;
        }
      }
    }
    img{
      width: 100%;
    }
  }
</style>
